{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block content %}
<div class="container-fluid px-0">
  <h2 class="mb-3 fw-semibold">管理控制台</h2>

  <!-- 快捷操作 -->
  <div class="card border-0 shadow-sm mb-3">
    <div class="card-body">
      <div class="d-flex flex-wrap gap-2">
        <a class="btn btn-primary" href="{% url 'assets:asset_create' %}">
          <i class="fas fa-plus me-1"></i> 添加资产
        </a>
        <a class="btn btn-success" href="{% url 'assets:inventory_plan_create' %}">
          <i class="fas fa-clipboard-check me-1"></i> 创建盘点
        </a>
        <a class="btn btn-outline-primary" href="{% url 'assets:asset_list' %}">
          <i class="fas fa-boxes me-1"></i> 资产列表
        </a>
        <a class="btn btn-outline-secondary" href="{% url 'assets:user_list' %}">
          <i class="fas fa-users-cog me-1"></i> 用户管理
        </a>
      </div>
    </div>
  </div>

  <!-- 小型仪表板（示例图表） -->
  <div class="row g-3 mb-3">
    <div class="col-12 col-lg-6">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-white fw-semibold">
          <i class="fas fa-chart-pie me-1"></i> 资产类别分布（示例）
        </div>
        <div class="card-body">
          <div id="chart-assets-category" style="height: 280px;"></div>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-6">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-white fw-semibold">
          <i class="fas fa-info-circle me-1"></i> 提示
        </div>
        <div class="card-body">
          <ul class="mb-0">
            <li>以上图表为示例，后续可接入真实统计数据。</li>
            <li>可在“报表管理”中查看更详细的数据分析。</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- 应用模块列表（兼容原生） -->
  {% if app_list %}
    <div class="row g-3">
      {% for app in app_list %}
        <div class="col-12 col-md-6 col-xl-4">
          <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white fw-semibold">
              {% if app.app_url %}<a href="{{ app.app_url }}">{{ app.name }}</a>{% else %}{{ app.name }}{% endif %}
            </div>
            <div class="card-body">
              <ul class="list-unstyled mb-0">
                {% for model in app.models %}
                  <li class="d-flex align-items-center justify-content-between py-1">
                    <div>
                      {% if model.admin_url %}
                        <a href="{{ model.admin_url }}">{{ model.name }}</a>
                      {% else %}
                        {{ model.name }}
                      {% endif %}
                      {% if model.add_url %}
                        <a class="badge text-bg-light ms-2" href="{{ model.add_url }}"><i class="fas fa-plus"></i> 新增</a>
                      {% endif %}
                    </div>
                    {% if model.view_only %}
                      <span class="badge text-bg-secondary">只读</span>
                    {% endif %}
                  </li>
                {% endfor %}
              </ul>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  {% else %}
    <div class="alert alert-info">暂无可管理的应用模块。</div>
  {% endif %}
</div>

{% endblock %}

{% block footer %}
  {{ block.super }}
  <script>
    (function() {
      if (window.echarts && document.getElementById('chart-assets-category')) {
        const el = document.getElementById('chart-assets-category');
        const chart = echarts.init(el);
        const option = {
          tooltip: { trigger: 'item' },
          legend: { orient: 'horizontal', bottom: 0 },
          series: [{
            name: '资产类别',
            type: 'pie',
            radius: ['35%', '65%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: true,
            data: [
              { value: 40, name: 'IT设备' },
              { value: 20, name: '办公家具' },
              { value: 15, name: '车辆' },
              { value: 10, name: '房产' },
              { value: 15, name: '其他' }
            ]
          }]
        };
        chart.setOption(option);
        window.addEventListener('resize', () => chart.resize());
      }
    })();
  </script>
{% endblock %}